<template>
  <div class="shop-info-container">
    <Header title="商家详情"/>
    <div class="shop-top">
      <img class="shop-top-logo" :src="shopData.Icon">
      <div class="shop-top-name">{{shopData.Name}}</div>
      <div class="goods-spec">
        <div class="goods-comment">
          <Rate :size="14" v-model="shopData.Score" disabled disabled-color="#feaa0c"/>
        </div>
        <div class="goods-score">{{shopData.Score}}</div>
        <div class="goods-num">月销{{shopData.SaleCount}}单</div>
      </div>
    </div>
    <section class="photos-container">
      <h1>商家实景</h1>
      <div class="photos">
        <img
          class="item"
          v-for="(img, index) in shopData.Pic1"
          :key="index"
          :src="img.Thumb"
          @click="showImage(index, shopData.Pic1)"
        />
      </div>
    </section>
    <section class="msg-container">
      <h1>商家信息</h1>
      <div class="line">
        <p class="title">商家电话</p>
        <p class="value"><a :href="`tel:${shopData.Phone}`">{{shopData.Phone}}</a></p>
      </div>
      <div class="line">
        <p class="title">地址</p>
        <p class="value">{{shopData.Address}}</p>
      </div>
    </section>
    <section class="photos-container">
      <h1>营业资质</h1>
      <div class="photos">
        <img
          class="item"
          v-for="(img, index) in shopData.Pic2"
          :key="index"
          :src="img.Thumb"
          @click="showImage(index, shopData.Pic2)"
        />
      </div>
    </section>
  </div>
</template>
<script>
import Header from "@/components/Header";
import { Rate, ImagePreview, Toast } from "vant";
export default {
  components: {
    Header,
    Rate
  },
  data() {
    return {
      shopData: {}
    };
  },
  methods: {
    showImage(index, originImage) {
      const images = originImage.map(item => item.Orignal);
      ImagePreview({
        images,
        startPosition: index
      })
    },
    getData(storeId) {
      return this.$http.store.info({
        storeId
      })
    },
  },
  created() {
    Toast.loading({
      duration: 0,
      message: '加载中...',
      forbidClick: true
    })
    const id = this.$route.params.id;
    this.getData(id).then(({ result }) => {
      this.shopData = result;
      Toast.clear();
    })
  }
};
</script>
<style lang="less" scoped>
.shop-info-container {
  .shop-top {
    background: #fff;
    padding: 40px 20px 20px;
    text-align: center;
  }

  .shop-top-logo {
    width: 120px;
    height: 120px;
    box-shadow: 0px -6px 6px #eee, -6px 0px 6px #eee, 6px 0px 6px #eee,
      0px 6px 6px #eee;
  }

  .shop-top-name {
    font-size: 28px;
    margin: 20px auto;
    line-height: 42px;
  }

  .shop-top .goods-spec {
    display: flex;
    font-size: 26px;
    align-items: center;
    justify-content: center;
    color: #666;
    line-height: 40px;
  }

  .shop-top .goods-score {
    margin: 0 40px 0 4px;
    color: #feaa0c;
  }
  section{
    background:#fff;
    padding:0 20px;
    margin: 20px 20px 0;
    line-height:40px;
    position:relative;
    h1{
      font-size:30px;
      font-weight:600;
      padding:20px 0;
    }
  }
  .photos-container{
    padding-bottom: 20px;
    .item{
      width: 150px;
      height: 150px;
      margin-right: 10px;
    }
  }
  .msg-container{
    padding-bottom: 10px;
    .line{
      padding: 20px 0;
      line-height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      a{
        text-decoration: underline;
      }
    }
  }
}
</style>
<style lang="less">
.shop-info-container{
  .van-rate__icon{
    vertical-align: text-top;
  }
}
</style>
